<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '充值',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 横向滚动公告条 -->
    <Announcement :tip="tip" />

    <!-- 顶部导航 -->
    <view class="top-nav">
      <view
        class="nav-item"
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 充值内容区域 -->
    <view class="recharge-content">
      <!-- 大标题 -->
      <view class="section-title">{{ tabList[activeTab].name }}</view>

      <!-- 礼包网格 -->
      <view class="gift-grid" v-if="activeTab === 1">
        <view class="gift-item" v-for="(gift, index) in gifts" :key="index">
          <!-- 礼包物品展示 -->
          <view class="gift-items">
            <view v-if="gift.blue && !gift.red" class="single">
              <image
                src="/static/images/recharge/blueGift.png"
                mode="aspectFit"
                class="crystal-image"
              ></image>
              <text>{{ gift.blue }}个</text>
            </view>
            <view v-if="gift.red && !gift.blue" class="single">
              <image
                src="/static/images/recharge/redGift.png"
                mode="aspectFit"
                class="crystal-image"
              ></image>
              <text>{{ gift.red }}个</text>
            </view>
            <view v-if="gift.blue && gift.red" class="both">
              <view class="both-item">
                <image
                  src="/static/images/recharge/blueGift.png"
                  mode="aspectFit"
                  class="crystal-image"
                ></image>
                <text>{{ gift.blue }}个</text>
              </view>
              <view class="both-item">
                <image
                  src="/static/images/recharge/redGift.png"
                  mode="aspectFit"
                  class="crystal-image"
                ></image>
                <text>{{ gift.red }}个</text>
              </view>
            </view>
          </view>

          <!-- 物品数量 -->
          <view class="item-count">
            <text v-if="gift.bonus" class="bonus-text">额外赠送{{ gift.bonus }}</text>
          </view>

          <!-- 价格 -->
          <view class="gift-price">¥{{ gift.price }}</view>
        </view>
      </view>
      <view class="gift-grid" v-if="activeTab === 0">
        <view class="gift-item" v-for="(gift, index) in monthGifts" :key="index">
          <!-- 礼包物品展示 -->
          <view class="gift-items">
            <view v-if="gift.blue && !gift.red" class="single">
              <image
                src="/static/images/recharge/blueGift.png"
                mode="aspectFit"
                class="crystal-image"
              ></image>
              <text>{{ gift.blue }}个</text>
            </view>
            <view v-if="gift.red && !gift.blue" class="single">
              <image
                src="/static/images/recharge/redGift.png"
                mode="aspectFit"
                class="crystal-image"
              ></image>
              <text>{{ gift.red }}个</text>
            </view>
            <view v-if="gift.blue && gift.red" class="both">
              <view class="both-item">
                <image
                  src="/static/images/recharge/blueGift.png"
                  mode="aspectFit"
                  class="crystal-image"
                ></image>
                <text>{{ gift.blue }}个</text>
              </view>
              <view class="both-item">
                <image
                  src="/static/images/recharge/redGift.png"
                  mode="aspectFit"
                  class="crystal-image"
                ></image>
                <text>{{ gift.red }}个</text>
              </view>
            </view>
          </view>

          <!-- 价格 -->
          <view class="gift-price">¥{{ gift.price }}</view>
          <!--剩余数量-->
          <view class="gift-lift">剩余数量: {{ gift.lift }}</view>
        </view>
      </view>
      <view class="none" v-if="activeTab === 2">该功能暂未正式对外提供服务，敬请期待55555。</view>
    </view>

    <!-- 底部导航栏 -->
    <Tabbar ref="Tabbar" pagePath="/pages/recharge/index" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Tabbar from '@/components/tabbar/tabbar.vue'
import Announcement from '@/components/announcement/index.vue'

const tip = ref('参与探险大赛赢丰厚奖励！每日登录领取免费礼包')
const activeTab = ref(1) // 默认选中能源大礼包
const tabList = ref([
  {
    name: '每月能源',
    icon: 'monthlyEnergy',
  },
  {
    name: '能源大礼包',
    icon: 'energyBigBag',
  },
  {
    name: '超值礼包',
    icon: 'valueBigBag',
  },
])
// 礼包数据
const gifts = ref([
  { blue: 60, red: 0, price: 6 },
  { blue: 200, red: 0, price: 18, bonus: '10%' },
  { blue: 2000, red: 0, price: 160, bonus: '20%' },
  { blue: 0, red: 60, price: 30 },
  { blue: 0, red: 200, price: 90, bonus: '10%' },
  { blue: 0, red: 1188, price: 488, bonus: '20%' },
  { blue: 33, red: 33, price: 18, bonus: '10%' },
  { blue: 180, red: 180, price: 160, bonus: '20%' },
  { blue: 2300, red: 1880, price: 999, bonus: '30%' },
])
const monthGifts = ref([
  { blue: 60, red: 0, price: 6, lift: 1 },
  { blue: 200, red: 0, price: 18, lift: 1 },
  { blue: 2000, red: 0, price: 160, lift: 1 },
  { blue: 0, red: 60, price: 30, lift: 1 },
  { blue: 0, red: 200, price: 90, lift: 1 },
  { blue: 0, red: 1188, price: 488, lift: 1 },
])
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;
  padding-top: 50rpx;
}

// 顶部导航
.top-nav {
  display: flex;
  justify-content: center;
  width: 510rpx;
  margin: 0 auto;
  margin-top: 50rpx;
  .nav-item {
    border-radius: 8rpx 8rpx 0 0;
    padding: 5rpx;
    font-size: 25rpx;
    color: #00ffff;
    transition: all 0.3s;
    border: 1px solid #00ffff;
    text-align: center;
    width: 170rpx;
    background-color: #272e68;
    &.active {
      background: #a13e77;
      color: #ffffff;
    }
  }
}

// 充值内容区域
.recharge-content {
  padding: 0 20rpx;
  border: 2px solid #00ffff;
  border-radius: 20rpx;
}

// 区域大标题
.section-title {
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
  background: #00ffff;
  width: 250rpx;
  margin: 0 auto;
  border-radius: 0 0 20rpx 20rpx;
  margin-bottom: 20rpx;
  padding: 0 0 5rpx 0;
}

// 礼包网格
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 100rpx;
}

// 礼包项
.gift-item {
  background-image: url('/static/images/recharge/gitBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1rpx solid #00ffff;
  border-radius: 20rpx;
  padding: 5rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;

  // 礼包物品展示
  .gift-items {
    width: 100%;
    height: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    .single {
      width: 100%;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .crystal-image {
        width: 100%;
        height: 140rpx;
      }
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.8);
        letter-spacing: 2rpx;
      }
    }
    .both {
      display: flex;
      flex-direction: column;
      align-items: center;
      .both-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .crystal-image {
          width: 60rpx;
          height: 60rpx;
        }
        text {
          font-size: 25rpx;
          font-weight: bold;
          color: #ffffff;
          text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.8);
          letter-spacing: 2rpx;
        }
      }
    }
  }

  // 物品数量
  .item-count {
    text-align: center;
    width: 100%;
    height: 30rpx;
    .bonus-text {
      display: block;
      font-size: 20rpx;
      color: #ffffff;
      margin-top: 5rpx;
    }
  }

  // 价格
  .gift-price {
    font-size: 40rpx;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10rpx rgba(255, 204, 0, 0.5);
    margin-top: 10rpx;
  }
}
.gift-lift {
  font-size: 18rpx;
  color: #000;
  font-weight: bold;
}
.none {
  font-size: 35rpx;
  color: #ffffff;
  padding: 100rpx 20rpx;
}
// 选中状态的礼包
.gift-item:active {
  transform: scale(0.98);
  box-shadow: 0 0 30rpx rgba(0, 255, 255, 0.6);
}
</style>
